'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';


import {connect} from 'react-redux';
import Util from '../../../../core/utils/util';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import ImageButton from "../../../../core/component/comp.image-button";
import PhotoInfoItem from "../../../../core/component-biz/comp.photo-info-panel";
import WinPanel from "../../../../core/component/comp.win-panel";
import WinPanelRow from "../../../../core/component/comp.win-panel-row";
import Color from "../../../../core/constant/color";
import {userActions} from '../../../../actions/index'

import ToastUtil from '../../../../core/utils/toast-util';
import {Loading, EasyLoading} from 'react-native-easy-loading';
import DatePicker from 'react-native-datepicker'
import CameraButton from '../../../../core/component/comp.button-camera';
import Http from '../../../../core/utils/http';
import ScrollableTabView from '@cross2d/react-native-scrollable-tab-view';
import TabBar from '../../../../core/component-biz/comp.tab-bar';
import UserSkillItem from '../../../../core/component-biz/comp.user-skill-item'

class MineOrderCenterScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: navigation.state.params.title,
        headerTintColor: "white",
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
    });

    constructor(props) {
        super(props);
        this.state = {
            tabs:[
                {
                    name:"全部",
                },{
                    name:"待确定",
                },{
                    name:"待服务",
                },{
                    name:"已完成",
                },{
                    name:"已取消",
                },
            ]
        }
    }

    componentDidMount() {
    }

    genTabPageUI() {
        const list = [
            {
                "id": 1,
                "person_id": 17,
                "price": 20,
                "skillDesc": "擅长中下，全时间段接单",
                "spzt": "1",
                "voice": "selfDescription",
                "zizhitu": "wangzherongyao_zizhi_template",
                "emp_id": 17,
                "nick_name": "小铃铛",
                "grade_id": 433,
                "skill_id": 16,
                "orderNumber": 11,
                "evaluateNumber": 5,
                "orderNumber30": 10,
                "orderNumber7": 4,
                "xinyong": 3,
                "state": "1",
                "systemDesc": "QQ区 强势核心 全区有号",
                "unit": "半小时",
                "zizhitu_url": "wangzherongyao_zizhi_template@/media/235.jpg",
                "voice_url": "selfDescription@/media/230.mp3",
                "skill_name": "白银大叔",
                "age": "27",
                "gender": "2",
                "times": "4天8小时52分钟",
                "touxiang_url": "touxiang_template@/media/237.jpg",
                "city_id": 175,
                "city_name": "上海市",
                "rownum": 1
            },
            {
                "id": 2,
                "person_id": 17,
                "price": 10,
                "spzt": "1",
                "voice": "selfDescription",
                "zizhitu": "jiaoxing_zizhi_template",
                "emp_id": 17,
                "skill_id": 22,
                "nick_name": "花仙子",
                "orderNumber": 2,
                "evaluateNumber": 1,
                "orderNumber30": 1,
                "orderNumber7": 4,
                "xinyong": 3,
                "state": "1",
                "unit": "次",
                "zizhitu_url": "jiaoxing_zizhi_template@/media/236.jpg",
                "voice_url": "selfDescription@/media/230.mp3",
                "skill_name": "白银月套餐",
                "age": "27",
                "gender": "2",
                "times": "4天8小时52分钟",
                "touxiang_url": "touxiang_template@/media/237.jpg",
                "city_id": 175,
                "city_name": "上海市",
                "rownum": 2
            }
        ];
        return (
            <ScrollView style={styles.pagePanelScrollView}>
                {list.map((item,index)=><UserSkillItem key={`common-user-skill-item-${index}`} item={item} />)}
            </ScrollView>
        );
    }

    genScrollTabPageUI(tabInfo, index) {
        return (
            <View key={`scroll-tab-page-${index}`} tabLabel={{label: tabInfo.name, badge: 0}} label={tabInfo.name}
                  style={styles.pagePanel}>
                {this.genTabPageUI()}
            </View>
        );
    }

    genScrollTabListUI() {
        const {tabs} = this.state
        let tabListUI = [];
        tabs.map((tabInfo, index) => {
            tabListUI.push(this.genScrollTabPageUI(tabInfo, index))
        })
        return tabListUI;
    }

    render() {
        const {tabs} = this.state
        return (
            <ScrollableTabView
                removeClippedSubviews={true}
                page={0}
                style={styles.body}
                initialPage={0}
                renderTabBar={
                    () =>
                        <TabBar underlineColor={Color.PRIMARY_COLOR} tabBarTextStyle={styles.tabBarText}
                                tabStyles={{tab: [styles.tabBar, {width: Util.getScreenWidth() / tabs.length}]}}/>
                }>
                {this.genScrollTabListUI()}
            </ScrollableTabView>
        )
    }
}

const styles = StyleSheet.create({
    body: {
        backgroundColor: '#FFF',
        width:Util.getScreenWidth(),
    },

    pagePanel: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 200,
    },
    scrollableTabBar: {
        backgroundColor: 'white',
    },
    tabBarContainer: {
        marginTop: 0,
        marginBottom: 0,
        alignItems: 'flex-end',
        borderBottomWidth: 0,

    },
    tabBar: {
        width: Util.getScreenWidth() / 3,
        height: 30,
        marginLeft: 0,
        alignItems: 'center',
    },
    tabBarText: {
        fontSize: 14,
        // borderWidth:1,
    },
    pagePanelScrollView:{
        width:'100%',
    },

});

export default connect((state, props) => {
    return ({

    });
})(MineOrderCenterScene);